<template>
  <div>
    <!--    标题-->
    <el-row>
      <el-col :span="24"><h1 style="text-align: center;font-family: '华文宋体'">供应商</h1></el-col>
    </el-row>
    <!--    表格-->
    <el-row>
      <el-col :span="24">
        <el-table :data="cutBean.records" style="width: 100%">
          <el-table-column fixed prop="id" label="编号" width="100"/>
          <el-table-column prop="name" label="姓名" width="200"/>
          <el-table-column prop="job" label="职位" width="200"/>
          <el-table-column prop="birthday" label="生日" width="200"/>
          <el-table-column fixed="right" label="操作" width="300">
            <template #default="scope">
              <el-button type="primary" size="small" @click="infoVisible=true">查看
                <el-icon>
                  <Delete/>
                </el-icon>
              </el-button
              >

              <el-button type="primary" size="small" @click="updateVisible=true">修改
                <el-icon>
                  <Grape/>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--   分页 -->
    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change=""
    />
    <el-row style="margin-top: 50px">
      <el-col :span="5"></el-col>
      <!--      添加按钮-->
      <el-col :span="8">
        <el-button @click="addVisible=true">
          添加供应商
        </el-button>
      </el-col>
      <!--      右边部分-->
      <el-col :span="9"
              style="border: 2px solid black;height: 200px;line-height: 50px;text-align: start;font-weight: bold;background-color:whitesmoke ">
        <div class="">
          <el-row>

            <el-col :span="8">
              供应商名称：
            </el-col>
            <el-col :span="7">
              <input type="text" v-model="findObj.name">
            </el-col>
          </el-row>

        </div>
        <div>
          <el-row>
            <el-col :span="8">
              经营范围 ：
            </el-col>
            <el-col :span="7">
              <input type="text" v-model="findObj.type">
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="13"></el-col>
            <el-col :span="5">
              <el-button type="primary" @click="">
                <el-icon>
                  <Coffee/>
                </el-icon>
                搜索
              </el-button>
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>
    <!--查看供应商-->
    <el-dialog
        v-model="infoVisible"
        title="供应商信息"
        width="30%"
    >
      <p>供应商名称: {{ supplierObj.name }}</p>
      <p>负责人: {{ supplierObj.user }}</p>
      <p>负责人电话: {{ supplierObj.phone }}</p>
      <p>供应商地址: {{ supplierObj.address }}</p>
      <p>经营范围: {{ supplierObj.scope }}</p>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <!--      添加信息弹出框-->
    <el-dialog
        v-model="addVisible"
        title="添加供应商信息"
        width="35%"
    >
      <el-form
          ref="userForm"
          :model="supplierObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
          style="width: 340px;"
      >
        <el-form-item label="供应商名称：" prop="">
          <el-input v-model="supplierObj.name"/>
        </el-form-item>
        <el-form-item label="负责人：" prop="">
          <el-input v-model="supplierObj.user"/>
        </el-form-item>
        <el-form-item label="负责人电话：" prop="">
          <el-input v-model="supplierObj.phone"/>
        </el-form-item>
        <el-form-item label="供应商地址：" prop="">
          <el-input v-model="supplierObj.address"/>
        </el-form-item>
        <el-form-item label="经营范围：" prop="">
          <el-input v-model="supplierObj.scope"/>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addVisible = false">添加</el-button>
      </span>
      </template>
    </el-dialog>

    <!--   修改div -->
    <el-dialog
        v-model="updateVisible"
        title="修改供应商信息"
        width="30%"
    >
      <p>供应商名称: {{ supplierObj.name }}</p>
      <el-form-item label="负责人：" prop="">
        <el-input v-model="supplierObj.user"/>
      </el-form-item>
      <el-form-item label="负责人电话：" prop="">
        <el-input v-model="supplierObj.phone"/>
      </el-form-item>
      <p>供应商地址: {{ supplierObj.address }}</p>
      <p>经营范围: {{ supplierObj.scope }}</p>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>


  </div>


</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutBean: {
        records: [
          {id: 2, name: "haha", job: "老板", birthday: "1993-02-01"},
          {id: 3, name: "oo", job: "boss", birthday: "1996-02-01"},
          {id: 1, name: "dd", job: "boss2", birthday: "1995-02-01"},
          {id: 4, name: "cc", job: "boss3", birthday: "1994-02-01"},
        ],
        total: 20,
        pages: 5,
        size: 4,
        current: 1
      },
      findObj: {},
      addVisible: false,
      infoVisible: false,
      updateVisible: false,
      supplierObj: {},


    }
  },
  methods: {},
  created() {

  }
}
</script>

<style scoped>

</style>